import { useState } from "react";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import { useNavigate } from "react-router-dom";

import "./index.scss";

const Earn = () => {
  const [isToggled, setIsToggled] = useState(false);

  const [IsAcitve, setIsAcitve] = useState(1);

  const navigate = useNavigate();
  function gotoPage(url: string) {
    navigate(url);
  }

  /**
   * 表单类别切换
   */

  const tabActive =(num:number)=>{
    setIsAcitve(num)
  }

  /**
   * 启动挖矿
   */
  const toggle = () => {
    setIsToggled(!isToggled);
  };


  return (
    <div className="earn-container">
      {/* 总数 */}
      <div className="total-box">
        <div className="item-box">
          <span className="name">全网总算力</span>
          <span className="num red">231,231.00 </span>
          <span className="unit red">H/s</span>
          <span className="arrow">
            <img src="./images/earn_bar_arrow.png" />
          </span>
        </div>
        <div className="item-box">
          <span className="name">全网钻石总数</span>
          <span className="num">231,231.00 </span>
          <span className="unit">枚</span>
          <span className="arrow">
            <img src="./images/earn_bar_arrow.png" />
          </span>
        </div>
        <div className="item-box min-item-box">
          <div className="min-item">
            <div className="name">全网总算力</div>
            <div>
              <span className="num">231,231.00 </span>
              <span className="unit">H/s</span>
            </div>
          </div>
          <div className="min-item">
            <div className="name">全网总算力</div>
            <div>
              <span className="num">231,231.00 </span>
              <span className="unit">H/s</span>
            </div>
          </div>
          <span className="arrow">
            <img src="./images/earn_bar_arrow.png" />
          </span>
        </div>
      </div>
      {/* 启动 */}
      <div className="mining-run">
        <div className={isToggled ? "btn runing" : "btn"} onClick={toggle}>
          <span className="name">{isToggled ? "正在挖矿" : "启动挖矿"}</span>
          {
            isToggled ?(<div className="countdown-box">倒计时：12小时23分12秒</div>):null
          }
          
        </div>
      </div>
      {/* 底部 */}
      <div className="earn-bottom-box">
        <div className="form-box">
          <div className="tab-box">
            <div className={IsAcitve==1?"item active":"item"} onClick={()=>{tabActive(1)}}>赎回钻石(ZS)</div>
            <div className={IsAcitve==2?"item active":"item"} onClick={()=>{tabActive(2)}}>质押钻石(ZS)</div>
          </div>
          {/* 可赎回 */}
          <div className="approve-box">
            <div className="left-box">
              <span className="name">可赎回：</span>
              <span className="value">231,231.00 </span>
            </div>
            <div className="right-box" onClick={()=>{gotoPage('record')}}><span className="name">查看流水</span><ArrowForwardIosIcon /></div>
          </div>
          {/* 填入数字 */}
          <div className="input-box">
            <input type="number" placeholder="请输入赎回钻石(ZS)的数量" />
            <div className="btn">全部</div>
          </div>
          <div className="submit-box">
            <div className="btn">
              <span className="title">确认</span>
            </div>
          </div>
        </div>
        {/* 介绍 */}
        <div className="form-box introduce-box">
          <div className="tab-box">
            <div className="item">质押钻石(ZS)</div>
          </div>
          <div className="introduce">
            <div className="inner-box">
              数据的安全性和可信度在现代社会中越来越重要，铭文技术作为一种关键的数据记录和验证手段，广泛应用于各行业。然而，现有的铭文解决方案面临效率低下和中心化风险的问题。铭文链旨在利用区块链技术解决这些问题。同时，“侏罗纪合成”游戏通过娱乐和奖励机制吸引用户，帮助推广铭文链，提高用户参与度和生态系统的活跃度。
              数据的安全性和可信度在现代社会中越来越重要，铭文技术作为一种关键的数据记录和验证手段，广泛应用于各行业。然而，现有的铭文解决方案面临效率低下和中心化风险的问题。铭文链旨在利用区块链技术解决这些问题。同时，“侏罗纪合成”游戏通过娱乐和奖励机制吸引用户，帮助推广铭文链，提高用户参与度和生态系统的活跃度。
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Earn;
